<template>
  <div>
    <h1>本地的 todo list 代办清单</h1>
    <el-button @click="addData">创建</el-button>
    <el-table :data="tableData" style="width:100%">

      <el-table-column prop="name" label="内容" width="600" />
      <el-table-column prop="time" label="时间" width="600" />

      <el-table-column fixed="right" label="操作">
        <template #default="scope">
          <el-button type="danger" size="small" @click="handleClick(scope.$index)">删除</el-button>
          <el-button type="primary" size="small" @click="editData(scope, scope.$index)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 标签弹窗 -->

    <el-dialog v-model="dialogFormVisible" title="添加待办">
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item label="内容" label-width="80" prop="name">
          <el-input size="mini" style="width:200px;" v-model="form.name" autocomplete="off" />
        </el-form-item>

        <el-form-item label="时间" label-width="80" prop="time">
          <el-date-picker format="YYYY/MM/DD" value-format="YYYY-MM-DD" style="width:200px;" v-model="form.time"
            type="date" placeholder="请选择时间" size="mini" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="saveData('form')">添加</el-button>
        </el-form-item>
        <!-- <el-button @click="dialogFormVisible = false">Cancel</el-button> -->
      </el-form>
    </el-dialog>

  </div>
</template>

<script>

export default {
  name: 'AppViwe',
  components: {},
  data () {
    return {
      tableData: [],
      dialogFormVisible: false,
      formLabelWidth: '',
      form: {
        name: '',
        time: '',
      },
      rules: {
        name: [
          { required: true, message: '请输入内容', trigger: 'blur' },

        ],
        time: [
          { required: true, message: '请选择时间', trigger: 'change' }
        ]
      },
      flag: 0,
      tableDataIndex:0,

    }
  },
  created () {
    if (localStorage.tables) {
      this.tableData = JSON.parse(localStorage.tables)
    }
  },
  mounted () { },
  methods: {
    saveData (formName) {
      if (this.flag == 0) {
        this.$refs[formName].validate((valid) => {
          console.log(valid)
          if (valid) {
            this.tableData.push({ name: this.form.name, time: this.form.time })
            localStorage.tables = JSON.stringify(this.tableData)
            this.dialogFormVisible = false
            this.form.name = ''
            this.form.time = ''
          } else {
            console.log('错了');
            return false;
          }
        });
      } else {
        this.$refs[formName].validate((valid) => {
          console.log(valid)
          if (valid) {
            this.tableData[tableDataIndex]=JSON.parse(JSON.stringify(this.form))
            localStorage.tables = JSON.stringify(this.tableData)
            this.dialogFormVisible = false
            this.form.name = ''
            this.form.time = ''
          } else {
            console.log('错了');
            return false;
          }
        });

      }
    },
    handleClick (index) {
      // console.log(scope.row, index)
      this.tableData.splice(index, 1)
      localStorage.tables = JSON.stringify(this.tableData)
    },
    addData () {
      this.flag = 0
      this.form.name = ''
      this.form.time = ''
      this.dialogFormVisible = true
    },
    editData (scope, index) {
      this.flag = 1
      this.tableDataIndex=index
      this.dialogFormVisible = true
      this.form = JSON.parse(JSON.stringify(scope.row))
    }
  }
}
</script>

<style lang="less" scoped>
/dep/ v-deep.el-table .cell {
  display: flex;
}
</style>
